<!-- 头部导航 -->
<nav class="navbar navbar-light bg-light fixed-top navbar-expand-lg shadow-sm">
  <div class="container">
	  	<a class="navbar-brand my-1" href="${currentSite.url}/">
	      <img src="${currentWeb.logo}" class="logo-sm-height"  height="30">
	    </a>
	    
	    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
	    	<span class="navbar-toggler-icon"></span>
	    </button>
	    
	    <div class="collapse navbar-collapse justify-content-end" id="navbarNav">
	        <ul class="navbar-nav">
	       	  <li class="nav-item <#if target??> <#else> active </#if>">
				 <a class="nav-link" href="${currentSite.url}/" >首页</a>
	          </li>
	          <@nav_root_list>
	          <#list navs as nav>
	              <li class="nav-item <#if target?? && target==nav.url> active </#if>">
	                <a class="nav-link" href="${nav.url}">${nav.name}</a>
					  <#if nav.hasChildren?? && nav.hasChildren == true>
						  <div class="subNav animated hidden" style="animate-duration: 0.1s">
							  <@nav_children_list id=nav.id recursive=true>
								<#list navs as navItem>
									<a class="nav-link" href="${navItem.url}">${navItem.name}</a>
								</#list>
							  </@nav_children_list>
						</div>
  					</#if>
	              </li>
			  </#list>
			  </@nav_root_list>
	      </ul>
	    </div>
    </div>
</nav>

<!--占位导航栏-->
<div style="height:71px;" class="head-sm-height"></div>

<style>
	/* 初始隐藏子菜单 */
	.subNav {
		display: none;
		position: absolute;
		background-color: rgba(255, 255, 255, 0.9); /* 白色半透明背景 */
		border-radius: 5px; /* 为子菜单增加一些圆角 */
		z-index: 1000; /* 确保子菜单浮在其他内容之上 */
	}

	/* 当父菜单项被悬停时，显示子菜单 */
	.nav-item {
		position: relative; /* 设置父菜单项为相对定位 */
	}

	.nav-item:hover > .subNav {
		display: block;
	}
</style>